<template>
	<view class="wrapper">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="供应商首页" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="header">
			<view class="search-card">
				<image class="arrow-icon" src="/static/images/jt-icon.png"></image>
				<view class="search-ipt">
					<image class="search-icon" src="/static/images/search-icon.png"></image>
					<input class="ipt" type="text" />
				</view>
				<image class="transpond-icon" src="/static/images/fx-icon.png"></image>
			</view>

			<view class="card">
				<view class="top">
					<image class="cover" :src="infoData.url"></image>
					<view class="detail">
						<view class="name">{{infoData.name}}</view>
						<view class="zg" @click="handleCheckBusli">
							<image class="yyzg-icon" src="/static/images/yyzg-icon.png"></image>
							<view class="text">营业资格</view>
							<image class="rg-icon" src="/static/images/arrow-right-bold.png"></image>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="address-info">
						<view class="location">{{infoData.location}}</view>
						<view class="address">{{infoData.address}}</view>
					</view>

					<view class="operate">
						<view class="col" v-for="item in operates" :key="item.name"
							@click="handleOperate(item.type, infoData)">
							<image class="img" :src="item.url"></image>
							<view class="name">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="footer">
					<image class="icon" src="/static/images/kf-icon.png"></image>
					<view class="txt">我是客服xx×，竭诚为你解答</view>
					<button class="kf-btn" @click="handleService" open-type="contact">问客服</button>
				</view>
			</view>
		</view>

		<view class="loanbond-card">
			<view class="lf">
				<view class="price">
					<view class="num">10</view>
					<view class="text">满11可用</view>
				</view>
				<view class="msg">
					<view class="title">【{{infoData.name}}】0元新享券</view>
					<view class="text">领取7天内有效</view>
				</view>
			</view>
			<view class="btn" @click="handleReceiveCoupon">立即领取</view>
			<!-- 已领取 -->
		</view>

		<view class="tabs-card">
			<Tabs :data="tabs" size="38rpx" @onTap="handleTap" />

			<template v-if="!currTab">
				<Select :Stabs="selectTabs" :Spopus="selectPopus" @onSelectTap="handleSelectTap"
					@onPopupClick="handlePopupClick" />
				<view class="shop-list">
					<view class="shop-item" v-for="(item, idx) in shopLists" :key="idx">
						<image :src="item.url" mode="" class="shop-img"></image>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="detail">
								<view class="price">
									￥
									<view class="count">{{item.price}}</view>
									到手价
								</view>
								<view class="fwl">{{item.fwl}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<!-- 动态头部操作区 -->
				<view class="tab-header">
					<view class="col" :class="{activeCol: idx == colIdx}" v-for="(item, idx) in tabHeaders"
						:key="item.name" @click="handleHClick(idx)">
						{{item.name}}
						<image class="icon" :src="item.url"></image>
					</view>
				</view>
				<!-- 动态列表 -->
				<Card :cardType="{Htype: 'none', Ftype: 'constom'}">
					<template #footer>
						<view class="dynamic-list">
							<view class="dynamic-item" v-for="(item, idx) in dynamicList" :key="idx">
								<view class="head">
									<image class="cover" :src="item.url" mode=""></image>
									<view class="detail">
										<view class="name">{{item.name}}</view>
										<view class="time">{{item.time}}</view>
									</view>
								</view>
								<view class="dynamic-body">
									<view class="title">
										<span class="tag">{{item.tags[0]}}
										</span>
										{{item.title}}
									</view>
									<view class="content-list">
										<image class="content-img" v-for="content in item.productExhibitions"
											:src="content" mode=""></image>
									</view>
									<view class="operation">
										<view class="lf">
											<view class="imgs">
												<image v-for="cover in item.Covers" class="operation-img" :key="cover"
													:src="cover" mode="">
												</image>
											</view>
											<view class="col">点赞+{{item.dz}}</view>
											<view class="col">加购{{item.jg}}</view>
											<view class="col">浏览{{item.ll}}</view>
										</view>
										<view class="rg">
											<view class="col">
												<image class="operation-icon"
													:src="isCollect ? '/static/images/collect-active.png' : '/static/images/collect.png'">
												</image>
											</view>
											<view class="col">
												<image class="operation-icon" src="/static/images/comment-icon.png"
													mode="">
												</image>
											</view>
										</view>
									</view>
									<view class="comment">
										<view class="comment-item" v-for="(comment, index) in item.pl" :key="index">
											<view class="label">
												{{comment.name}}
												<view class="tag">{{comment.isShop ? '买过' : '未买'}}</view>
												<view style="font-weight: 400;">:</view>
											</view>
											<view class="text">{{ comment.text}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</Card>
			</template>
		</view>
		<tab-bar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData: {
					url: 'http://cdnjson.com/images/2024/11/01/image-1.png', // 销售头像
					name: '全沃净水器专卖店', // 销售商名称
					location: '杭州之江银泰百货 F2', // 所在地
					address: '杭州市西湖区转塘街道珊瑚沙路', // 详细地址
					phone: '15665667558', // 手机号
					latitude: '30.150049', // 纬度
					longitude: '120.080200', // 经度
					isLoanBond: false, // 是否领取过劵门店劵
					selectPopus: [ // 该销售商门店的类别
						'全部',
						'过滤机',
						'精滤机',
						'纯水机',
						'超滤机',
						'饮水机'
					],
				},
				operates: [{
						url: '/static/images/map-icon.png',
						name: '地图',
						type: 'map'
					},
					{
						url: '/static/images/phone-icon.png',
						name: '电话',
						type: 'phone'
					},
					{
						url: '/static/images/consult-icon.png',
						name: '咨询',
						type: 'consult'
					},
				],
				tabs: ['商品', '动态'],
				currTab: 0,
				dynamicList: [{
						name: '全沃净水器专卖店',
						url: 'http://cdnjson.com/images/2024/11/02/image-3.png',
						productExhibitions: [
							'http://cdnjson.com/images/2024/11/04/image-3.png',
							'http://cdnjson.com/images/2024/11/04/image-2.png',
							'http://cdnjson.com/images/2024/11/04/image-1.png',
							'http://cdnjson.com/images/2024/11/04/image-4.png',
							'http://cdnjson.com/images/2024/11/04/image-5.png',
							'http://cdnjson.com/images/2024/11/04/image-6.png',
							'http://cdnjson.com/images/2024/11/04/image-7.png',
							'http://cdnjson.com/images/2024/11/04/image-8.png',
							'http://cdnjson.com/images/2024/11/04/image-9.png',
						],
						time: '今日发布',
						Covers: [
							'http://cdnjson.com/images/2024/11/04/Avatar.png',
							'http://cdnjson.com/images/2024/11/04/11.png'
						],
						title: '揭秘独家好货，新品闪亮登场，让每一刻充满惊喜！',
						tags: ['上新'],
						dz: 3,
						jg: 489,
						ll: 89655,
						pl: [{
							name: '花开富贵',
							isShop: true,
							text: '非常好！！很好用，客服也超级好'
						}]
					},
					{
						name: '全沃净水器专卖店',
						time: '昨日发布',
						url: 'http://cdnjson.com/images/2024/11/02/image-3.png',
						productExhibitions: [
							'http://cdnjson.com/images/2024/11/04/image-6.png',
							'http://cdnjson.com/images/2024/11/04/image-7.png',
							'http://cdnjson.com/images/2024/11/04/image-8.png',
							'http://cdnjson.com/images/2024/11/04/image-9.png',
							'http://cdnjson.com/images/2024/11/04/image-3.png',
							'http://cdnjson.com/images/2024/11/04/image-2.png',
							'http://cdnjson.com/images/2024/11/04/image-1.png',
							'http://cdnjson.com/images/2024/11/04/image-4.png',
							'http://cdnjson.com/images/2024/11/04/image-5.png',
						],
						Covers: [
							'http://cdnjson.com/images/2024/11/04/Avatar.png',
							'http://cdnjson.com/images/2024/11/04/11.png'
						],
						title: '揭秘独家好货，新品闪亮登场，让每一刻充满惊喜！',
						tags: ['怀旧'],
						dz: 3,
						jg: 489,
						ll: 89655,
						pl: [{
							name: '花开富贵',
							isShop: false,
							text: '非常好！！很好用，客服也超级好'
						}]
					},
				],
				tabHeaders: [{
						name: '最新',
						url: '/static/images/schedule.png'
					},
					{
						name: '最热',
						url: '/static/images/Activity.png'
					}
				],
				selectTabs: [{
						name: '类别',
						type: 'tags',
						filed: 'sort'
					},
					{
						name: '销量',
						type: 'value',
						filed: 'Sales'
					},
					{
						name: '上新',
						type: 'value',
						filed: 'update'
					},
					{
						name: '价格',
						type: 'select',
						filed: 'price'
					}
				],
				selectPopus: [
					'全部',
					'过滤机',
					'精滤机',
					'纯水机',
					'超滤机',
					'饮水机'
				],
				shopLists: [{
						url: 'http://cdnjson.com/images/2024/11/02/image-2.png', // 商品图片
						name: '全沃厨房专用超滤机大流量...', // 商品名称
						price: 277.4, // 商品价格
						fwl: '560 买过' // 商品热点数据 购买数据、浏览数据、加购数据
					},
					{
						url: 'http://cdnjson.com/images/2024/11/05/image-12.png',
						name: '全沃厨房专用前置过滤器量...净享好水..',
						price: 474.92,
						fwl: '1460 看过'
					},
					{
						url: 'http://cdnjson.com/images/2024/11/05/image-13.png',
						name: '全沃厨房专用精滤机...净享大流量..',
						price: 874.92,
						fwl: '260 看过'
					},
					{
						url: 'http://cdnjson.com/images/2024/11/02/image-2.png',
						name: '全沃厨房专用饮水机...',
						price: 174.92,
						fwl: '9960 看过'
					},
				],
				colIdx: 0
			}
		},
		onLaunch() {
			uni.hideTabBar()
		},

		created() {
			console.log('areaList::::::::', )
		},
		mounted() {
			// // #ifdef MP-WEIXIN
			// //微信小程序打开客服时，传递用户信息
			// var kefupara = {};
			// kefupara.nickName = res.data.nickName;
			// kefupara.tel = res.data.mobile;
			// _this.kefupara = JSON.stringify(kefupara);
			// // #endif
		},
		methods: {
			handleService() {
				// #ifdef APP-PLUS || APP-PLUS-NVUE
				this.$u.route('/pages/member/customerService/index');
				// #endif
			},
			handleOperate(type, info) { // 操作区域 地图、电话、咨询
				const {
					latitude,
					longitude,
					phone,
					name,
					address
				} = info
				switch (type) {
					case 'map':
						uni.openLocation({
							type: 'gcj02',
							latitude: Number(latitude),
							longitude: Number(longitude),
							name,
							address,
							success: function() {
								console.log('success');
							}
						})
						break
					case 'phone':
						uni.makePhoneCall({
							phoneNumber: phone
						})
						break
					case 'consult':
						console.log('咨询')
						return
				}
			},
			handleCheckBusli() { // 查看营业执照

			},
			handleReceiveCoupon() { // 领劵

			},
			handleTap(idx) { // tap切换
				this.currTab = idx
			},
			handleHClick(idx) { // 动态顶部区域的点击
				console.log(idx);
			},
			handleSelectTap(data) { // 选择器的tap栏的点击
				const {
					filed,
					idx,
					selectTypeObj,
					type
				} = data
				console.log(data);
			},
			handlePopupClick(idx) { // 选择器的popup的点击事件
				console.log(idx);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {

		.header {
			width: 100%;
			background: url('http://cdnjson.com/images/2024/11/04/hdbg.png');
			background-size: 100% 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			padding-bottom: 32rpx;

			.search-card {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				margin: 40rpx 0;

				.arrow-icon,
				.transpond-icon,
				.search-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.arrow-icon {
					width: 60rpx;
					height: 60rpx;
				}

				.search-ipt {
					flex: 1;
					height: 100%;
					margin: 0 16rpx;
					padding: 14rpx 24rpx;
					border-radius: 20rpx;
					background-color: rgba(235, 233, 230, .7);
				}
			}

			.card {
				width: 100%;
				padding-top: 24rpx;
				margin-top: 14rpx;
				background-color: #fff;
				border-radius: 28rpx;
				overflow: hidden;

				.top {
					display: flex;
					align-items: center;
					padding: 0 24rpx;

					.cover {
						width: 110rpx;
						height: 110rpx;
						margin-right: 16rpx;
						border-radius: 8rpx;
					}

					.detail {
						display: flex;
						flex-direction: column;

						.name {
							font-size: 40rpx;
						}

						.zg {
							display: flex;
							align-items: center;
							margin-top: 6rpx;
						}

						.yyzg-icon,
						.rg-icon {
							width: 28rpx;
							height: 28rpx;
						}

						.text {
							margin: 0 8rpx;
						}
					}
				}

				.content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 24rpx;
					padding-top: 20rpx;
					margin-top: 20rpx;
					border-top: 2rpx solid #DDDDDD;

					.address-info {
						font-size: 26rpx;

						.address {
							color: #7C7C7C;
						}
					}

					.operate {
						display: flex;

						.col {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin: 0 12rpx;

							.img {
								width: 30rpx;
								height: 30rpx;
								margin-bottom: 10rpx;
							}
						}
					}
				}

				.footer {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 18rpx;
					margin-top: 22rpx;
					width: 100%;
					height: 90rpx;
					background-image: linear-gradient(to right, #FFB630, #FFEBC7);
					color: #fff;

					.icon {
						width: 70rpx;
						height: 70rpx;
					}

					.icon {
						padding: 0 10rpx;
						font-size: 26rpx;
					}

					.kf-btn {
						width: 150rpx;
						height: 60rpx;
						line-height: 60rpx;
						border: none;
						background: none;
						background-image: linear-gradient(to right, #FFEBC7, #FFB630) !important;
						color: #fff;
						font-size: 28rpx;
						border-radius: 28rpx;

						&::after {
							display: none !important;
						}
					}
				}
			}
		}

		.loanbond-card {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FAE9E9;
			border-radius: 20rpx;
			margin: 20rpx 30rpx;
			overflow: hidden;

			.lf {
				display: flex;
				align-items: center;
				padding-left: 30rpx;

				.price {
					color: #FF0000;

					.num {
						font-size: 50rpx;
					}

					.text {
						font-size: 23rpx;
					}
				}

				.msg {
					margin-left: 18rpx;

					.title {
						font-size: 32rpx;
						margin-bottom: 8rpx;
					}

					.text {
						padding-left: 8rpx;
						font-size: 21rpx;
						color: #8F8B8B;
					}
				}
			}

			.btn {
				width: 68rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				background-color: #D0241C;
				padding: 10rpx 24rpx;
			}
		}

		.tabs-card {
			width: 100%;
			background-color: #fff;
			border-radius: 28rpx;
			padding-top: 18rpx;

			// 商品列表
			.shop-list {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 40rpx;
				box-sizing: border-box;

				.shop-item {
					width: 48%;
					margin: 0 1%;
					flex-shrink: 0;
					border: 2rpx solid #F5F5F5;
					border-radius: 24rpx;
					margin-bottom: 30rpx;
					padding-bottom: 20rpx;

					.shop-img {
						width: 100%;
						height: 310rpx;
						border-radius: 24rpx;
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-top: 12rpx;
						padding: 0 14rpx;

						.name {
							height: 90rpx;
							margin-bottom: 18rpx;
						}

						.detail {
							display: flex;
							align-items: center;

							.price {
								display: flex;
								align-items: center;
								color: #D0241C;
								font-size: 22rpx;
								margin-right: 12rpx;

								.count {
									font-size: 32rpx;
									margin: 0 6rpx;
								}
							}

							.fwl {
								color: #C2C2C2;
								font-size: 20rpx;
							}
						}
					}

				}

			}
		}

		// 动态样式
		.dynamic-list {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;

			.dynamic-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;

				.head {
					display: flex;
					align-items: center;
					width: 100%;

					.cover {
						width: 100rpx;
						height: 100rpx;
						margin-right: 14rpx;
					}

					.detail {
						flex: 1;

						.time {
							color: #C3C3C3;
						}
					}
				}

				.dynamic-body {
					width: 100%;
					box-sizing: border-box;
					padding-left: 114rpx;

					.title {
						font-size: 26rpx;

						.tag {
							background-color: #34C759;
							color: #fff;
							padding: 2rpx 8rpx;
							height: 40rpx;
							font-size: 26rpx;
							border-radius: 10rpx;
							margin-right: 6rpx;
						}
					}

					.content-list {
						display: flex;
						flex-wrap: wrap;

						.content-img {
							width: 32%;
							height: 170rpx;
							margin: .6%;
							border-radius: 28rpx;
						}
					}

					.operation {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.lf,
						.rg {
							display: flex;
							align-items: center;
						}

						.lf {
							.imgs {
								display: flex;

								.operation-img {
									width: 30rpx;
									height: 30rpx;
								}
							}

							.col {
								font-size: 24rpx;
								color: #C3C3C3;
								margin-left: 10rpx;
							}
						}

						.rg {
							.operation-icon {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.comment {
						display: flex;
						flex-direction: column;
						background-color: #F3F3F3;
						margin-top: 14rpx;
						padding: 16rpx 12rpx;
						border-radius: 14rpx;

						.comment-item {
							display: flex;

							.label {
								display: flex;
								width: 35%;
								font-size: 26rpx;
								font-weight: 600;

								.tag {
									background-color: #FFFFFF;
									color: #A9A9A9;
									font-size: 18rpx;
									height: 30rpx;
									line-height: 30rpx;
									margin: 0 12rpx;
								}
							}

							.text {
								font-size: 23rpx;
							}
						}
					}
				}
			}
		}

		// 动态头部操作区域
		.tab-header {
			display: flex;
			align-items: center;
			padding: 6rpx 32rpx;

			.col {
				display: flex;
				align-items: center;
				margin-right: 8rpx;

				.icon {
					width: 30rpx;
					height: 30rpx;
					vertical-align: bottom;
					margin-left: 6rpx;
				}
			}

			.activeCol {
				color: #D0241C;
			}
		}
	}
</style>